<template>
  <div>
    <el-card class="box-card" style="margin-bottom: 20px">
      <CategorySelect @getAttrList="getAttrList" :show="scene != 0"></CategorySelect>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 20px">
      <div v-show="scene == 0">
        <el-form ref="form" :model="spuForm" label-width="80px">
          <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px" :disabled="!categoryObj.category3Id" @click="addSpuForm">添加SPU</el-button>
          <el-table :data="spuList" stripe style="width: 100%" border>
            <el-table-column label="序号" width="80" type="index" align="center"> </el-table-column>
            <el-table-column prop="spuName" label="spu名称" width="180"> </el-table-column>
            <el-table-column prop="description" label="spu描述"> </el-table-column>
            <el-table-column prop="address" label="操作" width="300">
              <template slot-scope="{ row }">
                <hint-button type="success" size="mini" icon="el-icon-plus" title="添加sku" @click="addSku(row)"></hint-button>
                <hint-button type="warning" size="mini" icon="el-icon-edit" title="修改spu" @click="editSpuForm(row)"></hint-button>
                <hint-button type="info" size="mini" icon="el-icon-info" title="查看当前spu的全部sku列表" @click="checkALlSkuList(row)"></hint-button>
                <hint-button type="danger" size="mini" icon="el-icon-delete" title="删除spu" @click="deleteSpu(row)"></hint-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="text-align: center" @size-change="handleSizeChange" @current-change="getSpuList" :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit" layout="prev, pager, next, jumper,->,sizes,total  " :total="total"> </el-pagination>
        </el-form>
      </div>
      <el-dialog :title="spu.spuName" :visible.sync="dialogVisible" width="50%" v-loading="loading" :before-close="beforeClose">
        <el-table :data="skuList" style="width: 100%" border="">
          <el-table-column prop="skuName" label="名称" width="200px"> </el-table-column>
          <el-table-column prop="price" label="价格(元)" width="width"> </el-table-column>
          <el-table-column prop="weight" label="重量(kg)" width="width"> </el-table-column>
          <el-table-column label="默认图片" width="150px">
            <template slot-scope="{ row }">
              <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <SpuForm v-show="scene == 1" @changeScene="changeScene" ref="spuform"></SpuForm>
      <SkuForm v-show="scene == 2" @changeScene="changeScene" ref="skuform"></SkuForm>
    </el-card>
  </div>
</template>

<script>
import SpuForm from '@/views/products/Spu/SpuForm'
import SkuForm from '@/views/products/Spu/SkuForm'
export default {
  name: 'Spu',
  data() {
    return {
      spuList: [],
      categoryObj: {},
      spuForm: {},
      page: 1,
      limit: 3,
      total: 0,
      // 静态组件切换条件
      // 1:SPU的添加|修改 2:SKU的添加
      scene: 0,
      dialogVisible: false,
      spu: {},
      skuList: [],
      loading: true,
    }
  },
  components: {
    SpuForm,
    SkuForm,
  },
  methods: {
    getAttrList(data, cateForm) {
      // this.attrInfo.categoryId = cateForm.category3Id
      this.categoryObj = cateForm
      this.getSpuList()
    },
    async getSpuList(pages = 1) {
      this.page = pages
      const { page, limit, categoryObj } = this
      let res = await this.$API.Spu.reqSkuList(page, limit, categoryObj.category3Id)
      if (res.code === 200) {
        this.spuList = res.data.records
        this.total = res.data.total
      }
    },
    handleSizeChange(limit) {
      this.limit = limit
      this.getSpuList()
    },
    addSpuForm() {
      this.scene = 1
      this.$refs.spuform.addSpu(this.categoryObj.category3Id)
    },
    editSpuForm(row) {
      this.scene = 1
      // 获取子组件发请求
      this.$refs.spuform.initSpuData(row)
    },
    changeScene({ scene, type }) {
      this.scene = scene
      if (type == '修改') this.getSpuList(this.page)
      else this.getSpuList()
    },
    async deleteSpu(row) {
      let res = await this.$API.Spu.reqDeleteSpu(row.id)
      if (res.code == 200) {
        this.$message({ type: 'success', message: '删除成功！' })
        this.getSpuList(this.spuList.length > 1 ? this.page : this.page - 1)
      }
    },
    addSku(row) {
      this.scene = 2
      const { category1Id, category2Id } = this.categoryObj
      this.$refs.skuform.getSkuForm(category1Id, category2Id, row)
    },
    async checkALlSkuList(row) {
      this.dialogVisible = true
      this.spu = row
      let res = await this.$API.Spu.reqSku(row.id)
      if (res.code == 200) {
        this.skuList = res.data
        this.loading = false
      }
    },
    beforeClose(done) {
      // 每次都能加载loading效果
      this.loading = true
      // 解决数据回显问题
      this.skuList = []
      // 结束loading加载状态
      done()
    },
  },
}
</script>

<style>
</style>